<!-- 积分商品列表 -->
<template>
  <div class="jfList">
    <div v-if="!login" class="loginSign" @click="goLogin">登录查看你的积分，海量好货等你兑换！<i>立即登录</i></div>
    <div class="logined" v-if="login">
      <div class="loginSign" @click="goBind">绑定友阿实体卡，同步您的会员积分！<i>立即绑定</i></div>
      <div class="card_content">
        <div class="imgBox">
          <div class="num">卡号:038100016873</div>
          <img src="http://login.tepin.com/score/member/weixin/images/card/card_901.png?v=7057" alt="">
        </div>
        <div class="contentList">
          <div class="item">
            <img src="http://a.tepin.hk/o/2018hwg/images/jf_img/jf_ico.png" alt="">
            积分:<span>906</span>
          </div>
          <div class="item" @click="dh_goods">
            <img src="http://a.tepin.hk/o/2018hwg/images/jf_img/th_ico.png" alt="">
            兑换商品区
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
      <div class="sign">兑换记录去「我的订单」查看</div>
    </div>
    <div class="jfListItem" v-for="(item,index) of jfListData.data" :key="index">
      <div class="big_img"><img v-lazy="item.data[0].img_url" alt=""><i class="arrow"></i></div>
      <div class="goods_list_con">
        <div class="content border-left" v-for="(item2,index) of item.data[0].products" :key="item2.img_url" @click="goods_link(item.h5_url)">
          <div class="small_img  border-top"><img v-lazy="item2.img_url" alt=""></div>
          <div class="title">{{item2.product_name}}</div>
          <div class="price"><span class="now_price">{{item2.integralNumber}}积分</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'jfList',
  data(){
    return{
      login:false
    }
  },
  props:{
    jfListData:Object
  },
  created(){
    
  },
  mounted(){
    var user = JSON.parse(localStorage.getItem("youayun-user"));
    if(user){
      console.log(`有用户信息1`)
      this.login=true
    }else{
      this.Firstfindlogin()
    }
  },
  methods:{
    goods_link(e){
      window.location.href = e
    },
    goLogin(){
      var that=this
      var user = JSON.parse(localStorage.getItem("youayun-user"));
      if(user){
        console.log(`有用户信息2`)
        this.login=true
      }else{
        var findUser = function findUser() {
          var findOption = {
            'success': findSucess,
            "error": ex
          };
          object.findUser(findOption);
        };
        var findSucess = function findSucess(data) {
          console.log(`succ2`)
        };
        var ex = function ex(error, message, obj) {
          var loginOption = {
            'redirectUrl': window.location.href
          };
          object.login(loginOption);
        };
        var object = youayun({
          clientId: "haiwaigou",
          channel: "wap",
          skin: "haiwaigou-wap"
        });
        findUser();
      }
    },
    Firstfindlogin(){
      var that=this
      var findUser = function findUser() {
        var findOption = {
          'success': findSucess,
          "error": ex
        };
        object.findUser(findOption);
      };
      var findSucess = function findSucess(data) {
        console.log(`succ1`)
        that.login=true
      };
      var ex = function ex(error, message, obj) {
        // var loginOption = {
        //   'redirectUrl': window.location.href
        // };
        // object.login(loginOption);
      };
      var object = youayun({
        clientId: "haiwaigou",
        channel: "wap",
        skin: "haiwaigou-wap"
      });
      findUser();
    },
    goBind(){
      window.location.href=`http://m.tepin.hk/shop/jfmall/toMergeCard.html`
    },
    dh_goods(){
      window.location.href="http://m.tepin.hk/shop/search/i.html"
    }
  }
}

</script>

<style lang="stylus" scoped>
.loginSign{width:100%;height:40px;line-height:40px;padding:0 10px;background:#ffe594;color:#ff7800;font-size:12px;box-sizing: border-box;margin-bottom:10px;}
.loginSign i{display:inline-block;width:70px;height:26px;line-height:26px;margin-top:7px;text-align:center;font-size:12px;border-radius:3px;background:#ff7800;color:#fff;float:right;}

.jfList{width:100%;overflow:hidden;background:#fff;}
.big_img{width:100%;overflow:hidden;height:0;padding-bottom:49.907%;position:relative;}
.big_img img{width:100%;}
.big_img .arrow{position: absolute;left: 50%;margin-left: -0.0866665rem;bottom: 0;width: 0;height: 0;border-left: 0.173333rem solid transparent;border-right: 0.173333rem solid transparent;border-bottom: 0.173333rem solid #fff;z-index: 2;}
.goods_list_con{box-sizing:border-box;display:flex;flex-direction: row;align-items: center;justify-content:flex-start;flex-wrap:wrap;}
.content{padding-bottom:10px;width:33.33%;}
.content:nth-child(3n+1)::before{border-left:none;}
.content:nth-child(1) .small_img::before{border-top:none;}
.content:nth-child(2) .small_img::before{border-top:none;}
.content:nth-child(3) .small_img::before{border-top:none;}
.small_img{width:100%;height:0;padding-bottom:100%;}
.small_img img{width:100%;position:relative;z-index:-1;}
.title{height:0.6rem;line-height:0.3rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;font-size:0.2rem;color:#363636;font-weight:normal;white-space:normal;padding:0 5px;box-sizing:border-box;}
.price{font-size:0.3rem;color:#df4b53;margin-top:0.1rem;padding:0 5px;}
.price span{display:inline-block;}
.price .now_price{}
.price .old_price{margin-left:0.2rem;color:#aaa;text-decoration:line-through;}

.card_content{width:100%;overflow:hidden;background:url('http://a.tepin.hk/o/2018hwg/images/jf_img/card_bg.png') no-repeat center top;background-size:100%;}
.imgBox{width:230px;margin:30px auto 0 auto;position:relative;}
.imgBox img{width:100%;}
.imgBox .num{position:absolute;left:5px;bottom:5px;color:#fff;font-size:12px;}
.contentList{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 0;margin-top:20px;}
.contentList .item{flex:1;font-size:14px;}
.contentList .item:nth-child(1){border-right:0.5px solid #f8f8f8;}
.contentList .item img{width:16px;height:16px;display:inline-block;vertical-align: text-top;margin-left:20px;}
.contentList .item span{color:#ff7800;margin-left:5px;}

.sign{background:#f8f8f8;color:#898989;font-size:12px;text-align:center;width:100%;padding:10px 0;}
.logined{margin-bottom:10px;}

</style>